<template>
  <chart :auto-resize="true" :options="options"> </chart>
</template>

<script>
// const colors = ['#5793f3', '#d14a61', '#675bba']

export default {
  data() {
    return {
      options: {
        color: ["#ff993a", "#f2ff3b", "#48eaff"],
        // title: {
        //   text: "基础雷达图",
        // },
        tooltip: {},
        legend: {
          // 图例高度
          // itemHeight: 9,
          orient: "horizontal",
          bottom: 0,
          data: ["紧急告警占比", "重要告警占比", "一般告警占比"],
          textStyle: {
            color: ["#ff993a", "#f2ff3b", "#48eaff"],
            // fontSize: 10,
          },
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#48eaff",
              // backgroundColor: '#999',
              borderRadius: 3,
              // padding: [3, 5],
            },
          },
          indicator: [
            { name: "安防", max: 6500 },
            { name: "能耗", max: 16000 },
            { name: "资产", max: 30000 },
            { name: "环境", max: 38000 },
          ],
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          radius: 90,
        },
        series: [
          {
            name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            // 去掉连接处的点
            symbol: "none",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [3000, 13000, 21000, 35000],
                name: "紧急告警占比",
              },
              {
                value: [6500, 16000, 30000, 38000],
                name: "重要告警占比",
              },
              {
                value: [4900, 10000, 24000, 31000],
                name: "一般告警占比",
              },
            ],
          },
        ],
      },
    };
  },
};
</script>
